<template>
    <div>
        <el-input v-model="query.name" style="width: 200px" placeholder="请输入姓名"></el-input>
        <el-input v-model="query.city" style="width: 200px"  placeholder="请输入城市"></el-input>
        <el-input v-model="query.phone" style="width: 200px"  placeholder="请输入电话"></el-input>
        <el-button @click="getList()" type="primary">查询</el-button>
        <el-button @click="handleCreate()" type="primary">新增</el-button>
        <el-button @click="exportFile()" type="primary">导出</el-button>

        <el-table :data="tableData" style="width: 70%;margin:0 auto">
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="电话">
            </el-table-column>
            <el-table-column
                prop="city"
                label="城市">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.query.page"
            :page-sizes="[3, 10, 20, 30]"
            :page-size="this.query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
        </el-pagination>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" >
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" >
                    <el-input v-model="form.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" >
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="城市" >
                    <el-input v-model="form.city" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
            </div>
        </el-dialog>

        <a href="http://localhost:3312/images/2.png">2.png</a>

    </div>
</template>


<script>
import axios from 'axios'
export default {
    name: "myCrud",
    data() {
        return {
            total:0,
            query:{
                page:1,
                size:3,
                name:'',
                phone:'',
                city:''
            },
            dialogFormVisible: false,
            form:{
                id:'',
                name:'',
                age:'',
                phone:'',
                sex:'',
                city:''
            },

            tableData: [

            ],
        }
    },
    mounted(){
        this.getList();
    },
    methods:{
        getList(){
            axios.get("http://localhost:3312/user/getList",{
                params:{ 
                    page:this.query.page,
                    size:this.query.size,
                    name:this.query.name,
                    phone:this.query.phone,
                    city:this.query.city
                }
            }).then((resp)=>{
                let data = resp.data;
                console.log(data)
                if(data.success==true){
                    this.tableData = data.data.list;
                    this.total = data.data.total;
                }else{
                    this.$message({
                        type:'error',
                        message:data.message,
                    })
                    this.$router.push('/login')
                }     
            })
        },
        // 处理分页size
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.query.size = val;
            this.getList();
        },
        //处理当前页面更改
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.query.page = val;
            this.getList();
        },
        handleCreate(){
            this.form={},
            this.dialogFormVisible=true
        },
        handleDelete(scope){
            let id =  scope.row.id
            //调用删除接口
            axios.post("http://localhost:3312/user/delete/"+id).then((resp)=>{
                let data =  resp.data
                console.log('结果：',data)
                if(data.success) {
                    this.getList();
                    this.$message({
                        message:"删除id="+id+"的用户成功",
                        type:'success'
                    })
                }
                
            })
        },
        handleEdit(row){
            this.form = row
            this.dialogFormVisible=true
        },
        submitForm(){
            //调用保存接口
            axios.post("http://localhost:3312/user/save",this.form).then((resp)=>{
                let data = resp.data
                if(data.success){
                    this.dialogFormVisible=false;
                    this.form={};
                    this.getList();
                    this.$message({
                        message:'编辑/保存成功，我是message',
                        type: 'success'
                    })
                }

            })

        },
        exportFile(){
            axios({
                url:"http://localhost:3312/download",
                method:'get',
                responseType: 'blob',
            }).then(resp=>{
                console.log(resp)
                let url = window.URL.createObjectURL(resp.data);// 获取对象url
                alert("url:"+url);
                var a = document.createElement("a");//创建一个a标签
                a.href=url;
                a.download = 'test.csv';
                a.click();
                window.URL.revokeObjectURL(url);
            })
            
            
        }
    }
}
</script>